<template>
  <div>
    <!--导航栏-->
    <van-nav-bar
      title="请假"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="iphoneH">
      <van-form @submit="onSubmit">
        <van-cell  title="请假类型"  size="large">
          <van-dropdown-menu>
            <van-dropdown-item  v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </van-cell>

        <van-action-sheet v-model="show2" title="标题">
          <div class="content">
            <!--时间弹出层-->
            <van-popup
              v-model="show"
              position="bottom"
              :style="{ height: '20%' }"
            >
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
              />
            </van-popup>
          </div>
        </van-action-sheet>

        <van-cell is-link title="开始时间" value="内容" @click="showPopup" size="large">
          请选择
        </van-cell>
        <van-cell is-link title="结束时间" value="内容" @click="showPopup" size="large">
          请选择
        </van-cell>
        <van-field
          v-model="username"
          name="用户名"
          label="请假原因"
          placeholder="请输入"
          :rules="[{ required: true, message: '请假原因' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>

 <!--   <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>-->

    <!--时间弹出层-->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '20%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="getData"
      />
    </van-popup>
  </div>
</template>

<script>
  import {Toast} from "vant";

  export default {
    data() {
      return {
        show: false,
        show2: false,

        value1: 0,
        value2: 'a',
        option1: [
          { text: '事假', value: 0 },
          { text: '病假', value: 1 },
          { text: '婚假', value: 2 },
          { text: '调休', value: 2 },
          { text: '产假', value: 2 },
          { text: '丧假', value: 2 }
        ],
        value: '事假',
        showPicker: false,
        username: '',
        tel: '',
        text: '',
        digit: '',
        number: '',
        password: '',
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date()
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push('/work')
      },
      showPopup() {
        this.show = true;
      },
      onSubmit() {
        console.log('submit');
      },
      onConfirm(value) {
        this.value = value;
        this.showPicker = false;
      },
      getData(value){
        alert(value)
        this.show = false
      }
    }
  }
</script>

<style scoped>
  .iphoneH {
    height: 700px;
  }
  .content {
    padding: 16px 16px 160px;
  }

</style>
